{% extends "forum/forum_home.html" %}
{% block page_link %}
    <script src="../../static/personal_center/js/echarts.js"></script>
{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .survey_title:hover {
            background: #f7f7f7;
        }

        .empty {
            width: 200px;
            height: 35px;
            letter-spacing: 10px;
            background: #DFDFDF;
            border: #DFDFDF solid 1px;
        }

        .empty:hover {
            background: #cecece;
        }

        .presentation {
            width: 200px;
            height: 35px;
            margin-left: 20px;
            letter-spacing: 10px;
            background: #00a0e9;
            border: #00a0e9 solid 1px;
            color: white;
        }

        .presentation:hover {
            background: #0c6fd9;
        }
    </style>
{% endblock %}
{% block right_content %}
    <div style="width: 100%;height: 100%;background: white;font-size: 0;">
        <div style="width: 20%;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;font-size: 14px;">
            <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 2%;color: white;background: #2db7f5;letter-spacing: 2px;">
                调研问卷列表
            </div>
            <div style="width: 100%;height: 95%;overflow: auto;">
                {% if left_list|length %}
                    {% for left in left_list %}
                        <div class="survey_title"
                             style="width: 100%;height: 40px;line-height: 40px;letter-spacing: 1.5px;cursor: pointer;padding-left: 1.5%;{% if left.id == flow_id %}background: #cfcfcf;{% endif %}"
                             onclick="window.location.href='/forum/ResearchStatistics.html?id={{ left.id }}'">
                            {{ left.title }}
                        </div>
                    {% endfor %}
                {% else %}
                    <div style="width: 100%;height: 100%;text-align: center;letter-spacing: 3px;font-size: 14px;padding-top: 50%;background: white;color: #cfcfcf;">
                        <img src="../../static/personal_center/img/暂无资源.png" alt=""
                             style="width: 120px;height: 120px;margin-top: 30px;">
                        <p>暂无数据</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <div style="width: 79.5%;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;font-size: 14px;">
            {% if obj_flag %}
                <div style="width: 100%;height: 95%;overflow: auto;">
                    <div style="width: 100%;height: 200px;line-height: 200px;text-align: center;letter-spacing: 3px;font-size: 30px;">
                        <strong>{{ title }}</strong>
                    </div>
                    {% for table_s in table_list %}
                        <div style="width: 48%;height: 30%;border: #CCCCCC solid 1px;display: inline-block;vertical-align: top;background: white;margin-left: 15px;">
                            <div style="width: 100%;height: 40px;line-height: 40px;text-align: center;font-size: 18px;">
                                <strong>{{ table_s.subtitle }}</strong></div>
                            <div style="width: 100%;height: 83%;" id="{{ table_s.id }}">
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div style="width: 100%;text-align: center;letter-spacing: 3px;font-size: 14px;padding-top: 20%;background: white;color: #cfcfcf;">
                    <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;">
                    <p>暂无数据</p>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("research").className = "add-nav-active";
        };

        var table_list = {{ table_list | safe }};
        if (table_list.length) {
            for (var i = 0; i < table_list.length; i++) {
                var chartDom = document.getElementById(table_list[i]["id"]);
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    xAxis: {
                        type: 'category',
                        data: table_list[i]["option_list"]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    grid: { // 让图表占满容器
                        top: "50px",
                        left: "80px",
                        right: "80px",
                        bottom: "20px"
                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        backgroundColor: 'rgba(32, 33, 36,.7)',
                        borderColor: 'rgba(32, 33, 36,0.20)',
                        borderWidth: 1,
                        textStyle: { // 文字提示样式
                            color: '#fff',
                            fontSize: '12'
                        },
                        axisPointer: { // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }

                        },
                    },
                    series: [
                        {
                            data: table_list[i]["number_list"],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        }
    </script>
{% endblock %}